<!-- 个人基本信息展示页面 -->
<script lang='ts' setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
import { axiosRequests } from "../../hooks/axiosRequest"
//使用pinia 
import { userInfoStore } from '@/stores/userInfo'
const userInfo = userInfoStore()
//使用axios方法
const { userpost } = axiosRequests()
const drawer = ref(false)
//修改个人信息
async function updPersonInfo(key: any, e: any) {

    const newValue = e.currentTarget.previousElementSibling.value
    if (newValue === '' || newValue === null) {
        return
    }
    const result = await userpost('/upduser/updUser', { key, newValue })
    console.log("修改个人信息", key, result)
    if (result.status == 1) {
        return ElMessage.error("修改失败")
    } else {
        const result = await userInfo.getInitInfo()
        ElMessage({
            showClose: true,
            message: '修改成功',
            type: 'success',
        })
    }
}
//修改图片
const emit = defineEmits(['changePhoto'])
//点击显示上传图片 并传递给父组件
async function changePhoto() {
    let param = {
        content: true,
    }
    emit('changePhoto', param)
}
</script>
<template>
    <div class="block">
        <el-avatar :size="65" :src="userInfo.photo" @mouseenter="drawer = true" />
    </div>
    <div>
        <el-drawer v-model="drawer" title="个人基本信息('可通过ESC实现快速关闭')" :with-header="true" :modal="true"
            :lock-scroll="false">
            <el-avatar :size="75" :src="userInfo.userInfo!.files ? userInfo.userInfo!.files : userInfo.photo"
                style="margin-left: 200px;margin-bottom: 30px;" @click="changePhoto()" />
            <ul>
                <li v-for="(value, key, index) in userInfo.userInfo">
                    <label class="items" v-if="key.toString() === 'files' ? false : true">
                        <span class="item_name">{{ key }}:</span>
                        <input class="input_item" type="text" :placeholder="value === null ? 'null' : value"
                            :disabled="(`${key}` === 'email' || `${key}` === 'createtime' || `${key}` === 'logintime') ? true : false">
                        <el-button type="primary" :icon="Edit" circle @click="updPersonInfo(key, $event)"
                            :disabled="(`${key}` === 'email' || `${key}` === 'createtime' || `${key}` === 'logintime') ? true : false" />
                    </label>
                </li>
            </ul>
        </el-drawer>
    </div>

</template>
<style lang='scss' scoped>
ul li {
    list-style: none;
}

.items {
    display: flex;
    margin-left: 30px;
    margin-bottom: 30px;

    .item_name {
        text-align: right;
        margin-right: 10px;
        width: 120px;
        font-style: italic;
        font-size: 16px;
        color: gray;
    }

    .input_item {
        border: 0;
        outline: none;
        border-bottom: 1px solid blue;
        margin-right: 25px;
        background-color: white;
    }
}
</style>
